<template>
  <div class="content">
    <e-heading grade='1'>学员详情</e-heading>
    <div v-if="!loading">
      <student-detail 
        :studentDetailInfo="studentDetailInfo"
        @goto="handleGoto"/>
      <div class="main">
        <div class="divide"></div>
        <div class="student-detail">
          <el-tabs v-model="activeName">
            <el-tab-pane label="在上课程" name="first">
              <el-table
                :data="train_student_course_list.list"
                v-bind="getTableProps()"
                empty-text="暂无在上课程">
                <el-table-column
                  label="序号" 
                  width="50"
                  align="center">
                  <template slot-scope="scope">
                    {{scope.$index + 1 + (train_student_course_list.page - 1) * 15 }}
                  </template>
                </el-table-column>
                <el-table-column
                  prop="courseName"
                  label="课程名称"
                  :show-overflow-tooltip="true" 
                  align="center"
                  width="95">
                </el-table-column>
                <el-table-column
                  prop="schoolName"
                  label="校区" 
                  :show-overflow-tooltip="true"
                  align="center" 
                  width="95">
                </el-table-column>
                <el-table-column
                  align="center"
                  label="报名时间"
                  width="85">
                  <template slot-scope="scope">
                    {{scope.row.signupTime ? new Date(scope.row.signupTime).format('yyyy-MM-dd h:m') : '-'}}
                  </template>
                </el-table-column>
                <el-table-column
                  align="center"
                  label="分班时间"
                  width="85">
                  <template slot-scope="scope">
                    {{scope.row.dividedTime ? new Date(scope.row.dividedTime).format('yyyy-MM-dd h:m') : '-'}}
                  </template>
                </el-table-column>
                <el-table-column
                  prop="classesName"
                  label="班别" 
                  align="center"
                  :show-overflow-tooltip="true"
                  width="100">
                </el-table-column>
                <el-table-column
                  prop="signupFee"
                  label="报名费" 
                  align="center"
                  width="70">
                  <template slot-scope="scope">
                    {{scope.row.signupFee | formatMoney}}
                  </template>
                </el-table-column>
                <el-table-column
                  label="上课周期" 
                  align="center"
                  :show-overflow-tooltip="true" 
                  width="165">
                  <template slot-scope="scope">
                    <div v-if="scope.row.beginTime">{{new Date(scope.row.beginTime).format('yyyy-MM-dd')}}~{{new Date(scope.row.endTime).format('yyyy-MM-dd')}}</div>
                    <div v-if="scope.row.weekCodes">{{scope.row.weekCodes | getWeekList}}</div>
                    <div v-else>--</div>
                  </template>
                </el-table-column>
                <el-table-column prop="operate" label="操作" width="90" align="center">
                  <template slot-scope="scope">
                    <el-button
                      @click="handleCourseDetail(scope.$index, scope.row)"  type="link">查看上课情况</el-button>
                  </template>
                </el-table-column>
              </el-table>
              
              <el-pagination
                v-bind="getPaginationProps(train_student_course_list)"
                @current-change="handleCurrentChange"
                @size-change="handleSizeChange"
                >
              </el-pagination>
            </el-tab-pane>
            <el-tab-pane label="历史课程" name="second">
              <el-table
                :data="train_student_history_course.list"
                v-bind="getTableProps()"
                empty-text="暂无历史课程">
                <el-table-column
                  label="序号" 
                  width="50"
                  align="center">
                  <template slot-scope="scope">
                    {{scope.$index + 1 + (train_student_history_course.page - 1) * 15 }}
                  </template>
                </el-table-column>
                <el-table-column
                  prop="courseName"
                  label="课程名称"
                  :show-overflow-tooltip="true" 
                  align="center"
                  width="95">
                </el-table-column>
                <el-table-column
                  prop="schoolName"
                  label="校区" 
                  :show-overflow-tooltip="true"
                  align="center" 
                  width="95">
                </el-table-column>
                <el-table-column
                  align="center"
                  label="报名时间"
                  width="85">
                  <template slot-scope="scope">
                    {{scope.row.signupTime ? new Date(scope.row.signupTime).format('yyyy-MM-dd h:m') : '-'}}
                  </template>
                </el-table-column>
                <el-table-column
                  align="center"
                  label="分班时间"
                  width="85">
                  <template slot-scope="scope">
                    {{scope.row.dividedTime ? new Date(scope.row.dividedTime).format('yyyy-MM-dd h:m') : '-'}}
                  </template>
                </el-table-column>
                <el-table-column
                  prop="classesName"
                  label="班别" 
                  align="center"
                  :show-overflow-tooltip="true"
                  width="100">
                </el-table-column>
                <el-table-column
                  prop="signupFee"
                  label="报名费" 
                  align="center"
                  width="70">
                  <template slot-scope="scope">
                    {{scope.row.signupFee | formatMoney}}
                  </template>
                </el-table-column>
                <el-table-column
                  label="上课周期" 
                  align="center"
                  :show-overflow-tooltip="true" 
                  width="165">
                  <template slot-scope="scope">
                    <div v-if="scope.row.beginTime">{{new Date(scope.row.beginTime).format('yyyy-MM-dd')}}~{{new Date(scope.row.endTime).format('yyyy-MM-dd')}}</div>
                    <div v-if="scope.row.weekCodes">{{scope.row.weekCodes | getWeekList}}</div>
                    <div v-else>-</div>
                  </template>
                </el-table-column>
                <el-table-column prop="operate" label="操作" width="90" align="center">
                  <template slot-scope="scope">
                    <el-button
                      @click="handleCourseDetail(scope.$index, scope.row)"  type="link">查看上课情况</el-button>
                  </template>
                </el-table-column>
              </el-table>
              
              <el-pagination
                v-bind="getPaginationProps(train_student_history_course)"
                @current-change="handleCurrentChange"
                @size-change="handleSizeChange"
                >
              </el-pagination>
            </el-tab-pane>
          </el-tabs> 
        </div>
      </div>
    </div>
    
    <BirthdayDialog
      v-if="dialogVisible"
      :visible="dialogVisible"
      @savebirthday="handleSave"
      @close="dialogVisible = false">
    </BirthdayDialog>
  </div>
</template>

<script>
import {pagingList} from 'utils/mixins'
import { mapGetters } from 'vuex'
import BirthdayDialog from './components/chart/BirthdayDialog'
import studentDetail from './components/StudentDetail'
import trainApi from 'api/train'
export default {
  mixins: [pagingList],
  components: {
    studentDetail, BirthdayDialog
  },
  computed: {
    ...mapGetters({
      loading: 'loading',
      train_student_course_list: 'train_student_course_list', // 学员在上课程列表
      train_student_history_course: 'train_student_history_course'
    })
  },
  data () {
    return {
      query: this.getQuery(),
      activeName: 'first',
      studentDetailInfo: {},
      dialogVisible: false,
      form: {
        birthday: ''
      },
      pickerOptions1: {
        disabledDate (time) {
          return time.getTime() > Date.now()
        }
      }
    }
  },
  mounted () {
    this.$store.dispatch('train_student_history_course', {studentId: this.$route.params.id})
    trainApi.studentDetail({studentId: this.$route.params.id, operationFlag: true}).then(res => {
      this.studentDetailInfo = res.data
    })
  },
  methods: {
    handleCourseDetail (index, row) {
      this.$router.push({
        path: '/training/student/situation',
        query: {
          classId: row.classId,
          studentId: row.studentId,
          type: row.properties,
          studentSignupId: row.studentSignupId
        }
      })
    },
    fetch (query) {
      let queryInit = Object.assign({studentId: this.$route.params.id}, query)
      this.$store.dispatch('train_student_course_list', queryInit)
    },
    handleGoto () {
      if (this.studentDetailInfo.birthday) {
        this.gotoChart()
      } else {
        this.dialogVisible = true
      }
    },
    handleSave (birthday) {
      let data = Object.assign({}, this.studentDetailInfo, {birthday: birthday})
      trainApi.saveStudentBirthday(JSON.stringify(data), {context: this, successMsg: '修改成功'}).then(res => {
        this.dialogVisible = false
        this.gotoChart()
      })
    },
    gotoChart () {
      this.$router.push({
        path: '/training/student/chart',
        query: Object.assign({}, {id: this.$route.params.id})
      })
    }
  }
}
</script>

<style lang="scss">

.content {
  .main {
    min-height: 100%;
    background: #fff;
    .divide {
      margin: 30px -60px 0;
      border-top: 20px solid $color-background;
    }
    .student-detail {
      .el-tabs__content {
        margin-top: 20px;
      }
      .el-tabs {
        padding-top: 30px;
        .el-tabs__header {
          margin: 0px;
        }
      }
    }
  }
}
.student-from{
  .el-form-item__error{
    left: 26%;
  }
}
</style>
<style scoped>
.tips{
  color: #666;
}
.btn-block{
  margin: 20px auto 15px;;
}
</style>
